<template>
  <div class="dashboard-editor-container">
    <div class="content">
      <div class="data-wrap">
        <div class="data-box">
          <div class="home-item">
            <div class="home-top">
              <div class="home-tit">
                <div class="line"></div>
                <p>数据中心</p>
              </div>
              <div class="tabs_day">
                <div
                  :class="['tabs_item', { active: item.id == queryParams1.dataType }]"
                  v-for="item in tabsList"
                  :key="item.id"
                  @click="changeTabs(1, item.id)"
                >
                  {{ item.name }}
                </div>
                <div class="select_date">
                  <el-date-picker
                    v-model="queryParams1.formattedDate"
                    type="date"
                    placeholder="选择日期"
                    @change="changeDate1"
                    value-format="yyyy-MM-dd"
                    :clearable="false"
                  >
                  </el-date-picker>
                </div>
              </div>
            </div>
            <el-row :gutter="14" class="data-center">
              <el-col :span="6">
                <div class="data-item">
                  <div class="data_l">
                    <p class="data-num">{{ centerData.orderCount || 0 }}</p>
                    <p class="data-label">订单数量（笔）</p>
                  </div>
                  <div class="data_l">
                    <img src="@/assets/images/icon/home_1.png" alt="" />
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="data-item">
                  <div class="data_l">
                    <p class="data-num">{{ centerData.moneyCount || 0 }}</p>
                    <p class="data-label">成交金额（元）</p>
                  </div>
                  <div class="data_l">
                    <img src="@/assets/images/icon/home_2.png" alt="" />
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="data-item">
                  <div class="data_l">
                    <p class="data-num">{{ centerData.footprintCount || 0 }}</p>
                    <p class="data-label">浏览量（次）</p>
                  </div>
                  <div class="data_l">
                    <img src="@/assets/images/icon/home_3.png" alt="" />
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="data-item">
                  <div class="data_l">
                    <p class="data-num">{{ centerData.likeCount || 0 }}</p>
                    <p class="data-label">收藏量（次）</p>
                  </div>
                  <div class="data_l">
                    <img src="@/assets/images/icon/home_4.png" alt="" />
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="home-item">
            <div class="home-top">
              <div class="home-tit">
                <div class="line"></div>
                <p>数据概况</p>
              </div>
            </div>
            <el-row :gutter="14" class="view-box">
              <el-col :span="5">
                <div class="view-item">
                  <div class="view-info">
                    <div class="view-l">
                      <p class="view-label">今日下单数量（单）</p>
                      <p class="view-num">{{ viewData.countNow || 0 }}</p>
                    </div>
                    <div class="view-r">
                      <p class="yesterday">昨日</p>
                      <p class="yesterday-num">{{ viewData.countYesterday || 0 }}</p>
                    </div>
                  </div>
                  <div class="compare">
                    较昨日
                    <p>
                      <span
                        :class="{
                          up_style: viewData.countStatus == 1,
                          drop_style: viewData.countStatus == 2,
                        }"
                        >{{ viewData.percentageChangeCount || '0%' }}</span
                      >
                      <img
                        :src="getChangeIcon(viewData.countStatus)"
                        alt=""
                        v-if="viewData.countStatus && viewData.countStatus != 0"
                      />
                    </p>
                  </div>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="view-item">
                  <div class="view-info">
                    <div class="view-l">
                      <p class="view-label">今日支付订单（单）</p>
                      <p class="view-num">{{ viewData.numberNow || 0 }}</p>
                    </div>
                    <div class="view-r">
                      <p class="yesterday">昨日</p>
                      <p class="yesterday-num">
                        {{ viewData.numberNowYesterday || 0 }}
                      </p>
                    </div>
                  </div>
                  <div class="compare">
                    较昨日
                    <p>
                      <span
                        :class="{
                          up_style: viewData.numberStatus == 1,
                          drop_style: viewData.numberStatus == 2,
                        }"
                        >{{ viewData.percentageChangeNumber || '0%' }}</span
                      >
                      <img
                        :src="getChangeIcon(viewData.numberStatus)"
                        alt=""
                        v-if="viewData.numberStatus && viewData.numberStatus != 0"
                      />
                    </p>
                  </div>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="view-item">
                  <div class="view-info">
                    <div class="view-l">
                      <p class="view-label">今日支付金额（元）</p>
                      <p class="view-num">{{ viewData.moneyNow || 0 }}</p>
                    </div>
                    <div class="view-r">
                      <p class="yesterday">昨日</p>
                      <p class="yesterday-num">
                        {{ viewData.moneyYesterday || 0 }}
                      </p>
                    </div>
                  </div>
                  <div class="compare">
                    较昨日
                    <p>
                      <span
                        :class="{
                          up_style: viewData.moneyStatus == 1,
                          drop_style: viewData.moneyStatus == 2,
                        }"
                        >{{ viewData.percentageChangeMoney || '0%' }}</span
                      >
                      <img
                        :src="getChangeIcon(viewData.moneyStatus)"
                        alt=""
                        v-if="viewData.moneyStatus && viewData.moneyStatus != 0"
                      />
                    </p>
                  </div>
                </div>
              </el-col>
              <!-- 修改重复的内容，显示用户相关数据 -->
              <el-col :span="5">
                <div class="view-item">
                  <div class="view-info">
                    <div class="view-l">
                      <p class="view-label">今日下单人数（人）</p>
                      <p class="view-num">{{ viewData.userCountNow || viewData.countNow || 0 }}</p>
                    </div>
                    <div class="view-r">
                      <p class="yesterday">昨日</p>
                      <p class="yesterday-num">
                        {{ viewData.userCountYesterday || viewData.countYesterday || 0 }}
                      </p>
                    </div>
                  </div>
                  <div class="compare">
                    较昨日
                    <p>
                      <span
                        :class="{
                          up_style: viewData.userCountStatus == 1 || viewData.countStatus == 1,
                          drop_style: viewData.userCountStatus == 2 || viewData.countStatus == 2,
                        }"
                        >{{
                          viewData.percentageChangeUserCount ||
                          viewData.percentageChangeCount ||
                          '0%'
                        }}</span
                      >
                      <img
                        :src="getChangeIcon(viewData.userCountStatus || viewData.countStatus)"
                        alt=""
                        v-if="
                          (viewData.userCountStatus || viewData.countStatus) &&
                          (viewData.userCountStatus || viewData.countStatus) != 0
                        "
                      />
                    </p>
                  </div>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="view-item">
                  <div class="view-info">
                    <div class="view-l">
                      <p class="view-label">今日支付人数（人）</p>
                      <p class="view-num">
                        {{ viewData.userNumberNow || viewData.numberNow || 0 }}
                      </p>
                    </div>
                    <div class="view-r">
                      <p class="yesterday">昨日</p>
                      <p class="yesterday-num">
                        {{ viewData.userNumberNowYesterday || viewData.numberNowYesterday || 0 }}
                      </p>
                    </div>
                  </div>
                  <div class="compare">
                    较昨日
                    <p>
                      <span
                        :class="{
                          up_style: viewData.userNumberStatus == 1 || viewData.numberStatus == 1,
                          drop_style: viewData.userNumberStatus == 2 || viewData.numberStatus == 2,
                        }"
                        >{{
                          viewData.percentageChangeUserNumber ||
                          viewData.percentageChangeNumber ||
                          '0%'
                        }}</span
                      >
                      <img
                        :src="getChangeIcon(viewData.userNumberStatus || viewData.numberStatus)"
                        alt=""
                        v-if="
                          (viewData.userNumberStatus || viewData.numberStatus) &&
                          (viewData.userNumberStatus || viewData.numberStatus) != 0
                        "
                      />
                    </p>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="message-box">
          <div class="home-item">
            <div class="home-top">
              <div class="home-tit">
                <div class="line"></div>
                <p>消息中心</p>
              </div>
              <!-- <div class="more">查看更多</div> -->
            </div>
            <div class="message-list">
              <div
                :class="['message-item', { is_read: item.isRead == 0 }]"
                v-for="item in messageList"
                :key="item.id"
              >
                <div class="message-info">
                  <p>【订单通知】</p>
                  <div>
                    <span class="message-time">{{ item.createTime }}</span>
                    <!-- <span class="message-status">{{
                      item.isRead == 0 ? "已读" : "未读"
                    }}</span> -->
                  </div>
                </div>
                <p class="message-cont">
                  用户{{ hidePhone(item.orderPhone) }}，订单金额{{ item.paymentAmount }}，订单号：{{
                    item.orderNo
                  }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="data-statistics">
        <el-row :gutter="14">
          <el-col :span="12">
            <div class="home-item">
              <div class="home-top">
                <div class="home-tit">
                  <div class="line"></div>
                  <p>用户统计</p>
                </div>
                <div class="tabs_day">
                  <div
                    :class="['tabs_item', { active: item.id == queryParams2.dataType }]"
                    v-for="item in tabsList"
                    :key="item.id"
                    @click="changeTabs(2, item.id)"
                  >
                    {{ item.name }}
                  </div>
                  <div class="select_date">
                    <el-date-picker
                      v-model="queryParams2.formattedDate"
                      type="date"
                      placeholder="选择日期"
                      @change="changeDate2"
                      value-format="yyyy-MM-dd"
                      :clearable="false"
                    >
                    </el-date-picker>
                  </div>
                </div>
              </div>
              <div class="echart-box">
                <line-chart :chart-data="memberData" />
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="home-item">
              <div class="home-top">
                <div class="home-tit">
                  <div class="line"></div>
                  <p>订单统计</p>
                </div>
                <div class="tabs_day">
                  <div
                    :class="['tabs_item', { active: item.id == queryParams3.dataType }]"
                    v-for="item in tabsList"
                    :key="item.id"
                    @click="changeTabs(3, item.id)"
                  >
                    {{ item.name }}
                  </div>
                  <div class="select_date">
                    <el-date-picker
                      v-model="queryParams3.formattedDate"
                      type="date"
                      placeholder="选择日期"
                      @change="changeDate3"
                      value-format="yyyy-MM-dd"
                      :clearable="false"
                    >
                    </el-date-picker>
                  </div>
                </div>
              </div>
              <div class="echart-box">
                <line-chart :chart-data="orderData" />
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="rank-box">
          <div class="home-item">
            <div class="home-top">
              <div class="home-tit">
                <div class="line"></div>
                <p>场馆销量榜单</p>
              </div>
              <!-- <div class="more">查看更多</div> -->
            </div>
            <el-table :data="stadiumList" :row-class-name="getRankClassName">
              <el-table-column width="20" />
              <el-table-column prop="date" label="排名" width="60">
                <template v-slot="scope">
                  <span class="rank">{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="场馆" width="200">
                <template v-slot="{ row }">
                  <div class="stadium" @click="goStadiumDetail(row.stadiumId)">
                    <img :src="row.imgUrl" alt="" />
                    <span>{{ row.stadiumName }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="orderCount" label="销量"></el-table-column>
              <el-table-column prop="moneyCount" label="销售额"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
// import PanelGroup from './dashboard/PanelGroup.vue'
import LineChart from './dashboard/LineChart.vue'
import {
  countOrderDataByDay,
  getDataCenter as getDataCenterApi,
  getHomeNotify,
  getOrderDataByStadium,
  getMemberChange,
  getOrderCount,
} from '@/api/home/home'
import { color } from 'echarts'
import { checkPermi } from '@/utils/permission'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

// 定义数据接口
interface ViewData {
  countNow: number
  countYesterday: number
  percentageChangeCount: string
  countStatus: number
  numberNow: number
  numberNowYesterday: number
  percentageChangeNumber: string
  numberStatus: number
  moneyNow: number
  moneyYesterday: number
  percentageChangeMoney: string
  moneyStatus: number
  userCountNow?: number
  userCountYesterday?: number
  percentageChangeUserCount?: string
  userCountStatus?: number
  userNumberNow?: number
  userNumberNowYesterday?: number
  percentageChangeUserNumber?: string
  userNumberStatus?: number
}

interface CenterData {
  orderCount: number
  moneyCount: number
  footprintCount: number
  likeCount: number
}

interface MessageItem {
  id: number
  isRead: number
  createTime: string
  orderPhone: string
  paymentAmount: number
  orderNo: string
}

interface StadiumItem {
  stadiumId: number
  imgUrl: string
  stadiumName: string
  orderCount: number
  moneyCount: number
}

interface ChartData {
  xData: string[]
  yData1: number[]
  yData2?: number[]
  legendData: string[]
  color: string[]
}

export default defineComponent({
  name: 'Index',
  components: {
    // PanelGroup,
    LineChart,
  },
  setup() {
    const router = useRouter()
    return {
      router,
    }
  },
  created() {
    this.getDataView()
    this.getNotify()
    this.getHotStadium()
    this.changeTabs(1, 1)
    this.changeTabs(2, 1)
    this.changeTabs(3, 1)
  },
  data() {
    return {
      tabsList: [
        { id: 1, name: '7天' },
        { id: 2, name: '15天' },
        { id: 3, name: '30天' },
      ],
      viewData: {
        countNow: 0,
        countYesterday: 0,
        percentageChangeCount: '0%',
        countStatus: 0,
        numberNow: 0,
        numberNowYesterday: 0,
        percentageChangeNumber: '0%',
        numberStatus: 0,
        moneyNow: 0,
        moneyYesterday: 0,
        percentageChangeMoney: '0%',
        moneyStatus: 0,
      } as ViewData, //数据概况
      centerData: {
        orderCount: 0,
        moneyCount: 0,
        footprintCount: 0,
        likeCount: 0,
      } as CenterData, //数据中心
      messageList: [] as MessageItem[], //消息中心
      stadiumList: [] as StadiumItem[], //场馆销量榜单
      memberData: {
        xData: [],
        yData1: [],
        legendData: [],
        color: [],
      } as ChartData, //会员统计
      orderData: {
        xData: [],
        yData1: [],
        yData2: [],
        legendData: [],
        color: [],
      } as ChartData, //订单统计
      queryParams1: {
        dataType: 1 as number | null,
        formattedDate: null as string | null,
      },
      queryParams2: {
        dataType: 1 as number | null,
        formattedDate: null as string | null,
      },
      queryParams3: {
        dataType: 1 as number | null,
        formattedDate: null as string | null,
      },
    }
  },
  methods: {
    // 获取数据概况
    async getDataView() {
      try {
        const { data } = await countOrderDataByDay()
        this.viewData = data
      } catch (error) {
        console.error('获取数据概况失败:', error)
        ElMessage.error('获取数据概况失败')
      }
    },
    // 获取数据中心
    async getDataCenter() {
      try {
        const { data } = await getDataCenterApi(this.queryParams1)
        this.centerData = data
      } catch (error) {
        console.error('获取数据中心失败:', error)
        ElMessage.error('获取数据中心失败')
      }
    },
    // 获取消息中心
    async getNotify() {
      try {
        const res = await getHomeNotify()
        this.messageList = res.rows || []
      } catch (error) {
        console.error('获取消息中心失败:', error)
        ElMessage.error('获取消息中心失败')
      }
    },
    // 获取场馆销量榜单
    async getHotStadium() {
      try {
        const res = await getOrderDataByStadium()
        this.stadiumList = res.rows || []
      } catch (error) {
        console.error('获取场馆销量榜单失败:', error)
        ElMessage.error('获取场馆销量榜单失败')
      }
    },
    // 获取会员统计
    async getMember() {
      try {
        const { data } = await getMemberChange(this.queryParams2)
        this.memberData = {
          xData: data.map((item: any) => item.formattedDate),
          yData1: data.map((item: any) => item.addMember),
          legendData: ['新增用户数'],
          color: ['#2A82E4'],
        }
      } catch (error) {
        console.error('获取会员统计失败:', error)
        ElMessage.error('获取会员统计失败')
      }
    },
    // 获取订单统计
    async getOrder() {
      try {
        const { data } = await getOrderCount(this.queryParams3)
        this.orderData = {
          xData: data.map((item: any) => item.formattedDate),
          yData1: data.map((item: any) => item.orderCount),
          yData2: data.map((item: any) => item.moneyCount),
          legendData: ['支付订单数', '支付订单金额'],
          color: ['#00BAAD', '#D43030'],
        }
      } catch (error) {
        console.error('获取订单统计失败:', error)
        ElMessage.error('获取订单统计失败')
      }
    },
    // 数据中心选项切换
    changeTabs(type: number, id: number) {
      switch (type) {
        case 1:
          this.queryParams1.dataType = id
          this.queryParams1.formattedDate = null
          this.getDataCenter()
          break
        case 2:
          this.queryParams2.dataType = id
          this.queryParams2.formattedDate = null
          this.getMember()
          break
        case 3:
          this.queryParams3.dataType = id
          this.queryParams3.formattedDate = null
          this.getOrder()
          break
      }
    },
    // 数据中心选择日期
    changeDate1() {
      this.queryParams1.dataType = null
      this.getDataCenter()
    },
    // 会员统计选择日期
    changeDate2() {
      this.queryParams2.dataType = null
      this.getMember()
    },
    // 订单统计选择日期
    changeDate3() {
      this.queryParams3.dataType = null
      this.getOrder()
    },
    // 设置行样式
    getRankClassName({ row, rowIndex }: { row: any; rowIndex: number }) {
      switch (rowIndex) {
        case 0:
          return 'rank-1'
        case 1:
          return 'rank-2'
        case 2:
          return 'rank-3'
        default:
          return '' // 其他排名可以不特别标出或使用默认样式
      }
    },
    // 跳转到场馆详情
    goStadiumDetail(id: number) {
      this.$router.push({
        path: '/stadium/detail',
        query: { id },
      })
    },
    // 手机号中间*号
    hidePhone(phonenumber: string) {
      if (checkPermi(['sys:index:phone_view'])) {
        return phonenumber
      } else {
        return phonenumber?.substring(0, 3) + '****' + phonenumber?.substring(7, 11)
      }
    },
    // 获取变化图标
    getChangeIcon(status: number) {
      if (status == 1) {
        return new URL('@/assets/images/icon/up_icon.png', import.meta.url).href
      } else if (status == 2) {
        return new URL('@/assets/images/icon/drop_icon.png', import.meta.url).href
      }
      return ''
    },
  },
})
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 15px;
  background-color: #f1f2f3;
  position: relative;
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }

  .data-wrap {
    display: flex;
    margin-bottom: 16px;
    .data-box {
      flex: 1;
      .home-item {
        &:first-child {
          margin-bottom: 16px;
        }
      }
    }
  }
  .home-item {
    background: #fff;
    padding: 18px 12px 21px;
    .home-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .home-tit {
        display: flex;
        align-items: center;
        .line {
          width: 6px;
          height: 20px;
          background: #0988fb;
        }
        p {
          font-size: 18px;
          color: #383838;
          margin-left: 9px;
          line-height: 24px;
        }
      }
      .more {
        font-size: 16px;
        color: #2a82e4;
      }
      .select_date {
        margin-left: 14px;
        :deep(.el-date-editor) {
          width: 113px;
          height: 27px;
          .el-input__inner {
            height: 27px;
            line-height: 27px;
            padding-right: 10px;
            font-size: 12px;
            border-color: #a6a6a6;
          }
          .el-input__icon {
            line-height: 27px;
          }
        }
      }
    }
    .el-row {
      &.data-center {
        margin-top: 20px;
      }
      .el-col {
        .data-item {
          border-radius: 21px;
          padding: 0 42px;
          height: 129px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #fff;
          .data-num {
            font-size: 40px;
            line-height: 48px;
          }
          .data-label {
            font-size: 18px;
            line-height: 27px;
            margin-top: 7px;
          }
        }
        &:nth-child(1) {
          .data-item {
            background: linear-gradient(
              90deg,
              rgba(255, 161, 87, 1) 0%,
              rgba(254, 188, 104, 1) 100%
            );
          }
        }
        &:nth-child(2) {
          .data-item {
            background: linear-gradient(
              90deg,
              rgba(255, 116, 123, 1) 0%,
              rgba(254, 139, 144, 1) 100%
            );
          }
        }
        &:nth-child(3) {
          .data-item {
            background: linear-gradient(
              90deg,
              rgba(75, 167, 247, 1) 0%,
              rgba(118, 203, 243, 1) 100%
            );
          }
        }
        &:nth-child(4) {
          .data-item {
            background: linear-gradient(
              90deg,
              rgba(146, 137, 255, 1) 0%,
              rgba(182, 168, 255, 1) 100%
            );
          }
        }
      }
    }
    .view-box {
      margin-top: 23px;
      .el-col-5 {
        width: 20%;
        max-width: 20%;
        flex: 0 0 20%;
      }
      .view-item {
        background: #f5faff;
        border-radius: 12px;
        font-size: 14px;
        color: #383838;
        padding: 22px 9px 24px 13px;
        height: 185px;
        .view-info {
          display: flex;
          justify-content: space-between;
          .view-label {
            line-height: 21px;
          }
          .view-num {
            font-size: 36px;
            line-height: 42px;
            margin-top: 23px;
          }
          .view-r {
            .yesterday {
              color: #808080;
            }
            .yesterday-num {
              font-size: 20px;
              color: #a6a6a6;
              line-height: 42px;
              margin-top: 28px;
            }
          }
        }
        .compare {
          display: flex;
          line-height: 30px;
          margin-top: 23px;
          p {
            margin-left: 2px;
          }
          .up_style {
            color: #2a82e4;
          }
          .drop_style {
            color: #d43030;
          }
          img {
            margin-left: 4px;
          }
        }
      }
    }
  }
  .message-box {
    width: 471px;
    margin-left: 11px;
    .home-item {
      height: 100%;
      box-sizing: border-box;
      padding: 18px 0 0 15px;
      .home-top {
        padding-right: 21px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e5e5e5;
      }
    }
    .message-list {
      height: 440px;
      padding-top: 15px;
      padding-right: 21px;
      overflow: auto;
      .message-item {
        margin-bottom: 15px;
        .message-info {
          display: flex;
          align-items: center;
          justify-content: space-between;
          line-height: 19px;
          p {
            font-size: 13px;
            margin-left: -6px;
          }
          .message-time {
            font-size: 13px;
          }
          .message-status {
            font-size: 13px;
            color: #2a82e4;
            margin-left: 8px;
          }
        }
        .message-cont {
          font-size: 13px;
          line-height: 19px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        &.is_read {
          color: #a6a6a6;
          .message-status {
            color: #a6a6a6;
          }
        }
      }
    }
  }
  .data-statistics {
    display: flex;
    .el-row {
      flex: 1;
    }
    .rank-box {
      width: 471px;
      margin-left: 11px;
      .home-item {
        height: 100%;
      }
      .rank-1 {
        .rank {
          color: #ffc300;
        }
      }
      .rank-2 {
        .rank {
          color: #ff8d1a;
        }
      }
      .rank-3 {
        .rank {
          color: #9c5005;
        }
      }
      :deep(.el-table) {
        margin-top: 13px;
        th {
          background: #f3f4f6;
          border-bottom: none;
          height: 25px;
          line-height: 25px;
          padding: 0;
          .cell {
            line-height: 25px;
            font-size: 13px;
          }
        }
        .cell {
          color: #383838;
        }
        .stadium {
          display: flex;
          align-items: center;
          img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 21px;
          }
        }
        .el-table__body-wrapper {
          max-height: 360px;
          overflow-y: auto;
        }
      }
    }
  }
  .echart-box {
    margin-top: 47px;
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
